<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
	<title>春晓育儿</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<script type="text/javascript" src="<?php echo ($base_url); ?>/Public/Js/iscroll.js"></script>
	<script type="text/javascript" src="<?php echo ($base_url); ?>/Public/Js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript">
		var myScroll,
			pullDownEl, 
			pullDownOffset,
			pullUpEl, 
			pullUpOffset,
			generatedCount = 0;
		var offset = 10;
		var	limit  = 10;

		function pullDownAction () {
			setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
				var el, li, i;
				el = document.getElementById('thelist');

				location.reload();
	
				document.getElementById("pullUp").style.display="";
				myScroll.refresh();
			}, 1000);
		}

		function pullUpAction () {
			setTimeout(function () {
				var el, li, i;
				el = document.getElementById('thelist');
				var url = '<?php echo ($base_url); ?>' + '/home/mobile/getJingjingList';
				var data = {'offset':offset, 'limit': limit}; 
				$.ajax({
				    type: 'get',
				    url: url,
				    data: data,
				    dataType: 'json',
				    success: function(data) {
				    	data = data.data;
				    	offset = offset+limit;
				    	$.each(data, function(n, value){
				    		$('#thelist').append("<li class'user'><div class='user'><span class='avatar'><img src='http://woxiangjingjing_img.sundabao.com/2016/02/201213115333681781.jpg'></span><span class='username'>我是静静</span></div><div class='jingjing'><img src='"+ value.imgurl +"' width='100%'></div></li>");
				    	});	
				    }
				});
				
				myScroll.refresh();
			}, 1000);
		}

		function loaded() {
			pullDownEl = document.getElementById('pullDown');
			pullDownOffset = pullDownEl.offsetHeight;
			pullUpEl = document.getElementById('pullUp');	
			pullUpOffset = 10;
			//pullUpOffset = pullUpEl.offsetHeight;
			myScroll = new iScroll('wrapper', {
				useTransition: true,
				topOffset: pullDownOffset,
				onRefresh: function () {
					//that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
					//that.minScrollY = -that.options.topOffset || 0;
					//alert(this.wrapperH);
					//alert(this.scrollerH);
					if (pullDownEl.className.match('loading')) {
						pullDownEl.className = '';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';}
					if (pullUpEl.className.match('loading')) {
						pullUpEl.className = '';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
					}
					
					document.getElementById("pullUp").style.display="none";
					// document.getElementById("show").innerHTML="onRefresh: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
				},
				onScrollMove: function () {
					// document.getElementById("show").innerHTML="onScrollMove: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
					if (this.y > 0) {
						pullDownEl.className = 'flip';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
						this.minScrollY = 0;
					}
					if (this.y < 0 && pullDownEl.className.match('flip')) {
						pullDownEl.className = '';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
						this.minScrollY = -pullDownOffset;
					}
					
					if ( this.scrollerH < this.wrapperH && this.y < (this.minScrollY-pullUpOffset) || this.scrollerH > this.wrapperH && this.y < (this.maxScrollY - pullUpOffset) ) {
						document.getElementById("pullUp").style.display="";
						pullUpEl.className = 'flip';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
					} 
					 if (this.scrollerH < this.wrapperH && this.y > (this.minScrollY-pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH > this.wrapperH && this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
						document.getElementById("pullUp").style.display="none";
						pullUpEl.className = '';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
					}
				},
				onScrollEnd: function () {
					// document.getElementById("show").innerHTML="onScrollEnd: up["+pullUpEl.className+"],down["+pullDownEl.className+"],Y["+this.y+"],maxScrollY["+this.maxScrollY+"],minScrollY["+this.minScrollY+"],scrollerH["+this.scrollerH+"],wrapperH["+this.wrapperH+"]";
					if (pullDownEl.className.match('flip')) {
						pullDownEl.className = 'loading';
						pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
						pullDownAction();	// Execute custom function (ajax call?)
					} 
					 if (pullUpEl.className.match('flip')) {
						pullUpEl.className = 'loading';
						pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';		
						pullUpAction();	// Execute custom function (ajax call?)
					}
				}
			});
			
			//setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
		}

		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

		document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
	</script>

	<style type="text/css" media="all">
		*{
			margin: 0;
    		padding: 0;
		}
		body{
			text-rendering: optimizeLegibility;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		    -moz-font-feature-settings: 'liga','kern';
		    font-family: "PingHei","PingFang SC","Helvetica Neue","Helvetica","STHeitiSC-Light","Microsoft YaHei","Arial",sans-serif;
		    font-size: 14px;
		    font-weight: 400;
		    color: #333;
		    background: #f3f1ec;
		    padding-top: 0;
		}
		/* start user */
		.user {
			width: 100%;
		    height: 35px;
		    line-height: 35px;
		    display: inline-flex;
		}
		.user .avatar img {
			width: 35px;
			height: 35px;
			border-radius: 50px;
		}
		.user .username {
			margin-left: 10px;
		}
		/* end user */
		/* start header*/
		.header {
			background: #FF8585;
		    width: 100%;
		    height: 40px;
		    margin: 0 auto;
		    line-height: 40px;
		    text-align: center;
		    font-family: fantasy;
		    font-weight: bolder;
		    font-size: 18px;
		}
		/* end header */

		/* start wrapper */
		#wrapper {
			position:absolute; 
			height:100%;
			width:100%;
			background:#aaa;
		}

		#scroller {
			position:absolute; z-index:1;
		/*	-webkit-touch-callout:none;*/
			-webkit-tap-highlight-color:rgba(0,0,0,0);
			width:100%;
			padding:0;
		}

		#scroller ul {
			list-style:none;
			padding:0;
			margin:0;
			width:100%;
			text-align:left;
		}

		#scroller li {
			padding:10px;
			border-bottom:1px solid #ccc;
			border-top:1px solid #fff;
			background-color:#fafafa;
			font-size:14px;
		} 
		#scroller li .jingjing {
			padding: 0 35px;
		}

		/**
		 *
		 * Pull down styles
		 *
		 */
		#pullDown, #pullUp {
			background:#fff;
			height:40px;
			line-height:40px;
			/*padding:5px 10px;*/
			border-bottom:1px solid #ccc;
			font-weight:bold;
			font-size:14px;
			color:#888;
		}
		#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
			display:block; float:left;
			width:40px; height:40px;
			background:url("pull-icon@2x.png") 0 0 no-repeat;
			-webkit-background-size:40px 80px; background-size:40px 80px;
			-webkit-transition-property:-webkit-transform;
			-webkit-transition-duration:250ms;	
		}
		#pullDown .pullDownIcon {
			-webkit-transform:rotate(0deg) translateZ(0);
		}
		#pullUp .pullUpIcon  {
			-webkit-transform:rotate(-180deg) translateZ(0);
		}

		#pullDown.flip .pullDownIcon {
			-webkit-transform:rotate(-180deg) translateZ(0);
		}

		#pullUp.flip .pullUpIcon {
			-webkit-transform:rotate(0deg) translateZ(0);
		}
		
		#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
			background-position:0 100%;
			-webkit-transform:rotate(0deg) translateZ(0);
			-webkit-transition-duration:0ms;
			-webkit-animation-name:loading;
			-webkit-animation-duration:2s;
			-webkit-animation-iteration-count:infinite;
			-webkit-animation-timing-function:linear;
		}

		@-webkit-keyframes loading {
			from { -webkit-transform:rotate(0deg) translateZ(0); }
			to { -webkit-transform:rotate(360deg) translateZ(0); }
		}
		/* end wrapper */
	</style>
</head>
<body style="overflow: hidden;">
<header class="header"><span>春晓育儿</span></header>

<p id="show"></p> 
<div id="wrapper">
	<div id="scroller">
		<div id="pullDown">
			<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
		</div>
		<ul id="thelist">
			<?php if(is_array($articleList)): foreach($articleList as $k=>$vo): ?><li>
			   		<a href="<?php echo ($base_url); ?>/index.php/home/mobile/article?id=<?php echo ($vo["id"]); ?>"><?php echo ($vo["title"]); ?></a>
			   	</li><?php endforeach; endif; ?>
		</ul>
		<div id="pullUp" style="display:none;" >
			<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
		</div>
	</div>
</div>

<footer></footer>
</body>
</html>